<template>
  <div>
    <div class="flex">
      <div style="border: 1px solid red;width: 40px;height: 40px">1</div>
      <div style="border: 1px solid blue;width: 40px;height: 40px">2</div>
    </div>

    <AButton type="primary" @click="toggleDark()">切换暗黑主题</AButton>

    <SvgVue/>

    <AButton type="primary" @click="handleApi">{{ pgData.btnName }}</AButton>

    <div class="box">
        <div class="content"></div>
    </div>
    {{ useli8('page.title') }}

    <ASelect v-model:value="data.value" @change="change">
      <ASelectOption
          v-for="item in data.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      ></ASelectOption>
    </ASelect>

    <APagination
        v-model:current="data.currentPage"
        v-model:pageSize="data.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        :total="400"
    />

  </div>

</template>

<script setup lang="ts">
import { DtCache, initHttp, Ahttp, useli8, useAppStore } from '@zm-pkg/core'
import SvgVue from '@assets/vue.svg?component'
import { useToggle } from '@vueuse/shared'
import { useDark } from '@vueuse/core'

const { setLocale } = useAppStore()

const data = reactive({
  value: 'zh',
  options: [
    { label: '英文', value: 'en' },
    { label: '中文', value: 'zh' }
  ],
  currentPage: 1,
  pageSize: 10
})


const change =() => {
  setLocale(data.value)
}

DtCache.setLocal('Token', '12434jdjd')
const uploadRef = ref()
const pgData = reactive({
  btnName: '调取formData接口',
  fileList: []
})

const handleApi = () => {
  console.log(pgData.fileList)
  // uploadRef.value!.submit()
  let formData = new FormData()
  formData.append('file', pgData.fileList[0]?.raw)
  let param = {
    name: 'zhu',
    sex: '1',
    file: pgData.fileList[0]?.raw
  }
  initHttp({ BaseURL: '/www.com' })
  Ahttp.post({
    method: 'post',
    url: '/www.com',
    // params: param,
  },{ name: 22})
  // Ahttp.post({
  //   headers: {
  //     'content-type': 'application/x-www-form-urlencoded'
  //   }
  // },param, {
  // })
}


const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

<style scoped lang="less">
.box {
    height: 100px;
    border: 1px solid red;
    .content {
        height: 40px;
        border: 1px solid blue;
    }
}

</style>

